<template>
  <el-button
      type="primary"
      :disabled="isDisabled"
      :loading="remainingTime>0"
      @click="handleClick"
  >
    {{ buttonText }}
<!--    <span v-if="!remainingTime">{{ buttonText }}</span>
    <span v-else>{{ buttonText }}</span>-->
<!--    <span v-else>{{ remainingTime }}s 后可重试</span>-->
  </el-button>
</template>

<script>
export default {
  name: 'Btn',
  props: {
    buttonText: {
      type: String,
      default: ''
    },
    target: {
      type: String
    }
  },
  data() {
    return {
      remainingTime: 0,
      isDisabled: false,
      timerId: null
    };
  },
  methods: {
    handleClick() {
      if (this.isDisabled) return;
      this.$emit('btnSubmit');
      this.isDisabled = true;
      this.remainingTime = Number(this.target);
      this.timerId = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--;
        } else {
          clearInterval(this.timerId);
          this.isDisabled = false;
          this.remainingTime = 0;
        }
      }, 1000);
    }
  }
};
</script>